<template>
	<div class="hello">
		<el-button @click="dialogVisible2=true">评论</el-button>
	 <el-tree
	      :data="data"
	      show-checkbox
	      node-key="id"
	      default-expand-all
	      :expand-on-click-node="false">
	      <span class="custom-tree-node" slot-scope="{ node, data }">
	        <span>{{ node.label }}</span>
	        <span>
	          <el-button
	            type="text"
	            size="mini"
	            @click="() => append(data)">
	            回复
	          </el-button>
	          <el-button
	            type="text"
	            size="mini"
				style="color:red"
	            @click="() => remove(node, data)">
	            删除
	          </el-button>
	        </span>
	      </span>
	    </el-tree>
	<el-dialog
	  title="说出你的话"
	  :visible.sync="dialogVisible"
	  width="30%"
	  >
		<el-input v-model="message"></el-input>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="sumbmit">确 定</el-button>
	  </span>
	</el-dialog>
	<el-dialog
	  title="说出你的话"
	  :visible.sync="dialogVisible2"
	  width="30%"
	  >
		<el-input v-model="message"></el-input>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible2 = false">取 消</el-button>
	    <el-button type="primary" @click="sumbmit2">确 定</el-button>
	  </span>
	</el-dialog>
	</div>
</template>

<script>
  export default {
    data() {
		 const data = [{
		        id: 1,
		        label: '第一条评论',
		        children: [{
		          id: 4,
		          label: '第一条评论2',
		          children: [{
		            id: 9,
		            label: '第一条评论3'
		          }, {
		            id: 10,
		            label: '第一条评论4'
		          }]
		        }]
		      }, {
		        id: 2,
		        label: '第二条评论',
		        children: [{
		          id: 5,
		          label: '第二条评论2'
		        }, {
		          id: 6,
		          label: '第二条评论3'
		        }]
		      }, {
		        id: 3,
		        label: '第三条评论',
		        children: [{
		          id: 7,
		          label: '第三条评论2'
		        }, {
		          id: 8,
		          label: '第三条评论3'
		        }]
		      }];
      return {
		    dialogVisible: false,
			dialogVisible2:false,
        data: JSON.parse(JSON.stringify(data)),
		 data: JSON.parse(JSON.stringify(data)),
        defaultProps: {
          children: 'children',
          label: 'label'
        },
		a:100,
		b:500,
		message:'',
		huifuData:{}
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
		
      },
	  sumbmit(){
		  console.log("回复")
		  var data=this.huifuData
		  const newChild = { id: this.a++, label: this.message, children: [] };
		  if (!data.children) {
		    this.$set(data, 'children', []);
		  }
		  data.children.push(newChild);
		  this.message=''
		  this.dialogVisible=false
	  },
	    append(data) {
			console.log(data)
			this.dialogVisible=true
			this.huifuData=data
			
	         
	        },
			 remove(node, data) {
			        const parent = node.parent;
			        const children = parent.data.children || parent.data;
			        const index = children.findIndex(d => d.id === data.id);
			        children.splice(index, 1);
			      },
	  sumbmit2(){
		console.log("评论")  
		
		this.data.push({
			id:this.b++,
			label:this.message,
			children:[]
		})
		this.dialogVisible2=false
		console.log(this.data)
		this.message=''
	  },
	        renderContent(h, { node, data, store }) {
	          return (
	            <span class="custom-tree-node">
	              <span>{node.label}</span>
	              <span>
	                <el-button size="mini" type="text" on-click={ () => this.append(data) }>回复</el-button>
	                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
	              </span>
	            </span>);
	        }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
